<template>
  <div class="execution">
    <basic-container>
      <avue-crud ref="crud"
                 :page="page"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 @on-load="getList"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @row-update="handleUpdate"
                 @row-save="handleSave"
                 @row-del="rowDel">
        <template slot="menuLeft">
          <br/><br/>
        </template>
        <template slot-scope="scope"
                  slot="menu">
          <el-button type="text"
                     v-if="permissions.antborrow_bususermodel_detail"
                     icon="el-icon-check"
                     size="small"
                     plain
                     @click="details(scope.row)">查看详情
          </el-button>
        </template>
      </avue-crud>
    </basic-container>

    <!--用户画像弹窗-->
    <el-dialog title="用户画像" :fullscreen="isFull" :destroy-on-close="isClose" :visible.sync="dialogVisible">
      <el-tabs v-model="activeName" type="card" v-loading="tabLoading" @tab-click="handleClick">
        <el-tab-pane label="授信信息" name="0">
          授信信息
          <avue-form-detail style="text-align:left;text-indent:25px;" id="credits" v-model="form"
                            :option="option"></avue-form-detail>
          <div id="tabOneBtn">
            <el-button type="primary" @click="showHistory">查看授信历史</el-button>
            <el-button @click="dialogVisible = false">返回列表</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="借款信息" name="1">
          借款信息
          <FileLoanTotal :contracts="contractNoList" v-if="selectTab1">
            <el-tag>累计贷款金额: {{allLoanAmt | moneySwitch}}元</el-tag>
          </FileLoanTotal>
        </el-tab-pane>
        <el-tab-pane label="还款信息" name="2">
          还款信息
          <FileRepayTotal :contracts="contractNoList" v-if="selectTab2"/>
        </el-tab-pane>
        <el-tab-pane label="账单计划" name="3">
          账单计划
          <BusBillPlan :contracts="contractNoList" v-if="selectTab3">
            <el-tag>累计放款金额:{{allLoanAmt | moneySwitch}}元 已结清:{{allClearAmt | moneySwitch}}元 未结清:{{allNoClearAmt | moneySwitch}}元 代偿金额:{{allCompAmt | moneySwitch}}元</el-tag>
          </BusBillPlan>
        </el-tab-pane>
        <el-tab-pane label="代偿信息" name="4">
          代偿信息
          <BusCompensate :contracts="contractNoList" v-if="selectTab4"/>
        </el-tab-pane>
        <el-tab-pane label="理赔信息" name="5">
          理赔信息
          <FileRegist :contracts="contractNoList" v-if="selectTab5"/>
        </el-tab-pane>
        <el-tab-pane label="保费信息" name="6">
          保费信息
          <BusPremium :contracts="contractNoList" v-if="selectTab6">
            <el-tag>累计还款金额:{{allRepayAmt | moneySwitch}}元 累计已收保费:{{allPreAmt | moneySwitch}}元</el-tag>
          </BusPremium>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!--历史授信信息表格-->
    <el-dialog title="历史授信" width="80%" v-if="dialogHisVisible" :visible.sync="dialogHisVisible">
      <el-table border size="mini" :data="gridData">
        <el-table-column align="center" property="username" label="用户姓名" width="150"></el-table-column>
        <el-table-column align="center" property="phone" label="手机号" width="200"></el-table-column>
        <el-table-column align="center" property="identityNo" label="证件号"></el-table-column>
        <el-table-column align="center" property="validityDate" label="证件期效">
          <template slot-scope="scope">{{scope.row.validityDate | dateFormat}}</template>
        </el-table-column>
        <el-table-column align="center" property="province" label="省"></el-table-column>
        <el-table-column align="center" property="city" label="市"></el-table-column>
        <el-table-column align="center" property="area" label="区"></el-table-column>
        <el-table-column align="center" property="addr" label="地址"></el-table-column>
        <el-table-column align="center" property="jobType" label="职业类型"></el-table-column>
        <el-table-column align="center" property="nationality" label="国籍"></el-table-column>
        <el-table-column align="center" property="workUnit" label="工作单位"></el-table-column>
        <el-table-column align="center" property="quotaAmt" label="额度">
          <template slot-scope="scope">{{scope.row.quotaAmt | amtFormat}}</template>
        </el-table-column>
        <el-table-column align="center" property="interestRate" label="利率"></el-table-column>
        <el-table-column align="center" property="creditDate" label="授信日期">
          <template slot-scope="scope">{{scope.row.creditDate | dateFormat}}</template>
        </el-table-column>
        <el-table-column align="center" property="validFlag" label="是否有效">
          <template slot-scope="scope">{{scope.row.validFlag?"有效":"无效"}}</template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
  import {fetchList, getObj, addObj, putObj, delObj, detail} from '@/api/antborrow/filecustomer'
  import {getContracts, sumBillMulAmt} from '@/api/antborrow/busbillplan'
  import {sumLoan} from '@/api/antborrow/fileloantotal'
  import {sumPreMulAmt} from '@/api/antborrow/buspremium'
  import {tableOption} from '@/const/crud/antborrow/bususermodel'
  import {mapGetters} from 'vuex'
  import customer from './customer'
  import FileLoanTotal from '../fileloantotal'
  import FileRepayTotal from '../filerepaytotal'
  import BusBillPlan from '../busbillplan'
  import BusCompensate from '../buscompensate'
  import FileRegist from '../fileregist'
  import BusPremium from '../buspremium'

  export default {
    name: 'bususermodel',
    components: {
      FileLoanTotal,
      FileRepayTotal,
      BusBillPlan,
      BusCompensate,
      FileRegist,
      BusPremium
    },
    data() {
      return {
        isFull: true,
        isClose: true,
        form: {},
        option: {},

        selectTab1: false,
        selectTab2: false,
        selectTab3: false,
        selectTab4: false,
        selectTab5: false,
        selectTab6: false,

        tabLoading: false,

        activeName: '0',

        gridData: '',


        tableData: [],
        page: {
        },
        tableLoading: false,
        tableOption: tableOption,
      }
    },
    created() {
    },
    mounted: function () {
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    filters: {
      amtFormat(val) {
        if (val) {
          return val.toFixed(2);
        }
      },
      moneySwitch(val) {
        return (val / 100).toFixed(2);
      },
      dateFormat(val) {
        if (val) {
          return val.toString().substring(0, 10);
        }
      }
    },
    methods: {
      getList(page) {
        this.tableLoading = true;
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, this.queryParams)).then(response => {
          let arr = response.data.data.records;
          arr.map(item => {
            item.identityNo = this.displayIdCard(item.identityNo, 5, 3)
          });
          this.tableData = response.data.data.records
          this.page.pageSize = response.data.data.pageSize
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },
      amtFormat(val) {
        if (val) {
          return val.toFixed(2);
        }
      },
      moneySwitch: function moneySwitch(val) {
        return (val / 100).toFixed(2);
      },
      displayIdCard: function plusXing(str, frontLen, endLen) {
        if (str != null && str !== "") {
          let len = str.length - frontLen - endLen;
          let xing = '';
          for (let i = 0; i < len; i++) {
            xing += '*';
          }
          return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
        }
      },
      details(row) {
        this.activeName = '0';
        this.dialogVisible = true;
        this.userId = row.id;
        this.handleClick({name: '0'})
      },
      handleClick(tab) {
        let thiz = this;
        thiz.tabLoading = true;

        switch (tab.name) {
          case '0':
            detail(thiz.userId).then(function (res) {
              thiz.option = {option: customer};
              let one = res.data.data[0];
              thiz.idNo = one.identityNo;
              one.quotaAmt = thiz.amtFormat(one.quotaAmt);
              thiz.form = one;
              thiz.tabLoading = false;
              getContracts(thiz.form.identityNo).then(res => {
                if (res.data.code === 0) {
                  let contractsStr = res.data.data.join(',');
                  if (contractsStr) {
                    thiz.contractNoList = contractsStr;
                  } else {
                    thiz.contractNoList = '-1'
                  }
                }
              });
            });
            break;
          case '1':
            sumLoan(thiz.idNo).then(res => {
              thiz.allLoanAmt = res.data.data;
              thiz.selectTab1 = true;
              thiz.tabLoading = false;
            });
            thiz.selectTab1 = false;
            break;
          case '2':
            this.$nextTick(() => {
              this.selectTab2 = true
            })
            thiz.selectTab2 = false;
            thiz.tabLoading = false;
            break;
          case '3':
            sumBillMulAmt(thiz.idNo).then(res => {
              let amtArr = res.data.data;
              thiz.allLoanAmt = amtArr[0];
              thiz.allClearAmt = amtArr[1];
              thiz.allNoClearAmt = amtArr[2];
              thiz.allCompAmt = amtArr[3];
              thiz.selectTab3 = true;
              thiz.tabLoading = false;
            });
            thiz.selectTab3 = false;
            break;
          case '4':
            this.$nextTick(() => {
              this.selectTab4 = true
            })
            thiz.selectTab4 = false;
            thiz.tabLoading = false;
            break;
          case '5':
            this.$nextTick(() => {
              this.selectTab5 = true
            })
            thiz.selectTab5 = false;
            thiz.tabLoading = false;
            break;
          case '6':
            sumPreMulAmt(thiz.idNo).then(res => {
              let amtArr = res.data.data;
              thiz.allRepayAmt = amtArr[0];
              thiz.allPreAmt = amtArr[1];
              thiz.selectTab6 = true;
              thiz.tabLoading = false;
            });
            thiz.selectTab6 = false;
            break;
        }
      },
      showHistory() {
        detail(this.userId).then(res => {
          this.dialogHisVisible = true;
          let one = res.data.data;
          one.quotaAmt = this.amtFormat(one.quotaAmt);
          this.gridData = one;
        });
      },
      /**
       **/
      handleAdd: function () {
        this.$refs.crud.rowAdd()
      },
      handleEdit(row, index) {
        this.$refs.crud.rowEdit(row, index)
      },
      handleDel(row, index) {
        this.$refs.crud.rowDel(row, index)
      },
      rowDel: function (row, index) {
        var _this = this
        this.$confirm('是否确认删除ID为' + row.id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delObj(row.id)
        }).then(data => {
          _this.tableData.splice(index, 1)
          _this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          this.getList(this.page)
        }).catch(function (err) {
        })
      },
      /**
       **/
      handleUpdate: function (row, index, done) {
        putObj(row).then(data => {
          this.tableData.splice(index, 1, Object.assign({}, row))
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          done()
          this.getList(this.page)
        })
      },
      /**
       **/
      handleSave: function (row, done) {
        addObj(row).then(data => {
          this.tableData.push(Object.assign({}, row))
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          done()
          this.getList(this.page)
        })
      },
      /**
       */
      searchChange(form) {
        this.queryParams = this.filterForm(form)
        this.getList(this.page)
      },
      /**
       */
      refreshChange() {
        this.getList(this.page)
      }
    }
  }
</script>

<style lang="scss" scoped>
  #credits h1 {
    margin-left: -25px;
  }

  #tabOneBtn {
    margin-top: 80px;
    text-align: center;
  }
</style>
